; (function ($) {

  const Tab = function (ele, opt) {
    this.$element = $(ele)
    this.options = $.extend({}, Tab.DEFAULTS, opt)
    this.$container = $(this.options.container)
    this.show()
  }

  Tab.DEFAULTS = {
    container: '.tab-nav'
  }

  Tab.prototype.show = function () {
    let href = this.$element.attr('href')
    let $href = $(href)
    let $container = this.$container
    let $parent = this.$element.parent('li')
    if( $parent.hasClass('active') ) return
    this.activate($parent, $container)
    this.activate($href, $href.parent())
  }

  Tab.prototype.activate = function(element, container){
    let $active = container == this.$container ? container.find('.active') : container.find('>.active')
    $active.removeClass('active')
    element.addClass('active')
  }

  function Plugin(options) {
    return this.each(function () {
      new Tab(this, options)
    })
  }

  $(document).ready(function () {
    $('[data-plugin="tab"]').on('click', function (e) {
      e.preventDefault()
      Plugin.call($(this))
    })
  })
})(jQuery)

